<!--头部-->
<head th:fragment="top_head(title)">
    <meta charset="UTF-8">
    <title th:replace="${title}">首页</title>
    <link rel="shortcut icon" th:href="@{/images/bird.gif}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cus_style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/nav_basic_icons/iconfont.css}">
</head>
<!--导航栏-->
<nav th:fragment="top_nav_bar(n)" class="ui inverted attached segment cus-padding-top-bottom-minimize">
    <!--    导航栏项目列表-->
    <div class="ui container">
        <div class="ui menu inverted stackable secondary">
            <h2 class="ui teal header item">
                Blog
            </h2>
            <a href="#" th:href="@{/}" class="c-toggle item cus-mobile-hide" th:classappend="${n==1} ? 'active'"><i
                    class="iconfont icon-B4"></i>首页</a>
            <a href="#" th:href="@{/types/-1}" class="c-toggle item cus-mobile-hide"
               th:classappend="${n==2} ? 'active'"><i
                    class="iconfont icon-B2"></i>分类</a>
            <a href="#" th:href="@{/tags/-1}" class="c-toggle item cus-mobile-hide" th:classappend="${n==3} ? 'active'"><i
                    class="iconfont icon-B1"></i>标签</a>
            <a href="#" th:href="@{/archives}" class="c-toggle item cus-mobile-hide"
               th:classappend="${n==4} ? 'active'"><i class="iconfont icon-B3"></i>归档</a>
            <a href="#" th:href="@{/aboutMe}" class="c-toggle item cus-mobile-hide" th:classappend="${n==5} ? 'active'"><i
                    class="iconfont icon-B3"></i>关于我</a>
            <div class="right c-toggle item cus-mobile-hide">
                <form action="#" name="search" method="post" th:action="@{/search/1}">
                    <div class="ui icon inverted transparent input">
                        <input type="text" id="search_input" name="query" th:value="${query}" placeholder="全站搜索...">
                        <i onclick="document.forms['search'].submit()" class="iconfont icon-B link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--    手机端导航栏切换按钮-->
    <a href="#" id="toggle_nav_btn" class="ui black icon button cus-mobile-show m-top-right-position">
        <i class="iconfont icon-B"></i>
    </a>
</nav>
<!--底部内容-->
<footer th:fragment="footer_nav_bar" class="ui inverted vertical segment cus-padding-top-bottom-massive">
    <!--    注意center和aligned的位置，有先后顺序-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/images/bird.gif}" class="ui rounded image" alt="一张占位符bird">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <p class="cus-text-lined">个人博客的一些介绍</p>
            </div>
        </div>
        <!--    分割线-->
        <div class="ui inverted section divider"></div>
        <p>
            Copyright © Lobo All Rights Reserved.
        </p>
    </div>
    <script th:src="@{/js/jquery-3.6.0.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/semantic.min.js}" type="text/javascript"></script>
    <script type="text/javascript">
        // 手机端切换导航栏
        $('#toggle_nav_btn').click(function () {
            $('.c-toggle').toggleClass('cus-mobile-hide');
        })
    </script>
</footer>

<!--将博客详情页的头部和底部单独分出来，避免每个网页都加载大量的CSS和JS-->
<!--头部-->
<head th:fragment="blog_top_head(title)">
    <meta charset="UTF-8">
    <title th:replace="${title}">首页</title>
    <link rel="shortcut icon" th:href="@{/images/bird.gif}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cus_style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/nav_basic_icons/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/typocss/typo.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/animate/animation.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/tocbot/dist/tocbot.css}">
</head>

<footer th:fragment="blog_footer_nav_bar" class="ui inverted vertical segment cus-padding-top-bottom-massive">
    <!--    注意center和aligned的位置，有先后顺序-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/images/bird.gif}" class="ui rounded image" alt="一张占位符bird">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                    <a href="#" class="item">玛卡巴卡</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新文章</h4>
                <p class="cus-text-lined">个人博客的一些介绍</p>
            </div>
        </div>
        <!--    分割线-->
        <div class="ui inverted section divider"></div>
        <p>
            Copyright © Lobo All Rights Reserved.
        </p>
    </div>
    <script th:src="@{/js/jquery-3.6.0.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/semantic.min.js}" type="text/javascript"></script>
    <script th:src="@{/lib/prism/prism.js}" type="text/javascript"></script>
    <script th:src="@{/lib/tocbot/dist/tocbot.min.js}" type="text/javascript"></script>
    <script th:src="@{/lib/scrollTo/scrollTo.js}" type="text/javascript"></script>
    <script type="text/javascript">
        // 手机端切换导航栏
        $('#toggle_nav_btn').click(function () {
            $('.c-toggle').toggleClass('cus-mobile-hide');
        })
    </script>
</footer>

